<template>
  <div class="wrap">
    <div class="statistics">
      <div
        v-for="(v, k, i) in statistics"
        :key="k"
        :style="(i === 0 ? {flex: '1 1'} : {})"
        class="item"
      >
        <template v-if="k !== 'line'">
          <div class="count">{{ v.value }}</div>
          <div class="label">{{ v.label }}</div>
        </template>
      </div>
    </div>
    <div class="list">
      <Tabs :config="tab" height="100%">
        <template #a>
          <AutoList :params="{coopStatus: 0}" :request="getDataTrackList" @list="setList($event, 0)">
            <div
              v-for="(item, index) in list1"
              :key="index"
              class="item"
            >
              <div class="avatar" />
              <div class="name textLineHidden">{{ item.name }}</div>
              <div class="time">{{ item.auditTime || '--' }}</div>
            </div>
          </AutoList>
        </template>
        <template #b>
          <AutoList :params="{coopStatus: 1}" :request="getDataTrackList" @list="setList($event, 1)">
            <div
              v-for="(item, index) in list2"
              :key="index"
              class="item"
            >
              <div class="avatar" />
              <div class="name textLineHidden">{{ item.name }}</div>
              <div class="time">{{ item.auditTime || '--' }}</div>
            </div>
          </AutoList>
        </template>
        <template #c>
          <AutoList :params="{coopStatus: 2}" :request="getDataTrackList" @list="setList($event, 2)">
            <div
              v-for="(item, index) in list3"
              :key="index"
              class="item"
            >
              <div class="avatar" />
              <div class="name textLineHidden">{{ item.name }}</div>
              <div class="time">{{ item.auditTime || '--' }}</div>
            </div>
          </AutoList>
        </template>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getDataTrackList, getStatisticsData } from '@P/DataTracking/request'
import Tabs from '@C/Tabs.vue'
import AutoList from '@C/AutoList.vue'
import type { IObj, IObjArray } from '@/interface'

// 数据统计
const statistics = reactive(<IObj>{
  sumcount: {
    label: '智客总数',
    value: 0,
  },
  line: {},
  todayreg: {
    label: '今日注册',
    value: 0,
  },
  todaynew: {
    label: '今日新增',
    value: 0,
  },
})

const tab = [
  { label: '待审核', key: 'a' },
  { label: '已通过', key: 'b' },
  { label: '被驳回', key: 'c' },
]
// 列表
const list1 = ref(<IObjArray>[])
const list2 = ref(<IObjArray>[])
const list3 = ref(<IObjArray>[])
const setList = (list: IObjArray, index: number) => {
  [list1, list2, list3][index].value = list
}

async function getTotalData() {
  const { code, data } = await getStatisticsData()
  Object.keys(data).forEach((key: string) => {
    statistics[key].value = data[key]
  })
}
getTotalData()
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  padding: 30rpx 20rpx;
  .statistics, .list {
    background: white;
    border-radius: 20rpx;
    overflow: hidden;
  }
  .statistics {
    flex: 0 0 200rpx;
    display: flex;
    align-items: center;
  }
  .list {
    flex: 1 1;
    margin-top: 20rpx;
  }
}
.statistics {
  padding: 0 20rpx;
  .item {
    flex: 0 0 160rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .count {
      font-size: 60rpx;
      color: #1890ff;
    }
    .label {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
.list {
  .item {
    height: 80rpx;
    margin: 10px 0;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    background: antiquewhite;
  }
  .name {
    width: 200rpx;
    color: rgba(0, 0, 0, 0.85)
  }
}
</style>
